﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>用户中心</title>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<script src="js/jquery/jquery.min.js"></script>
		<script src="js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
		<script src="js/jquery.validation/1.14.0/messages_zh.min.js"></script>
		<style>
			input.error {
				border: 1px solid #E6594E;
			}
		</style>
	</head>

	<body>
		<div class="container">

			<form id="addUserForm">
				<br/>
				<div class="form-group">
					<label for="userName">用户名称：</label>
					<input type="text" class="form-control" id="userName" name="userName" placeholder="输入名称">
				</div>
				<div class="form-group">
					<label for="passWord">用户密码：</label>
					<input type="text" class="form-control" id="passWord" name="passWord" placeholder="输入密码">
				</div>
				<div class="form-group">
					<button type="button" id="saveBtn" class="btn btn-success">提交</button>
					<button type="button" id="cancelBtn" class="btn btn-default">取消</button>
				</div>
			</form>
		</div>

		<script>
			var addUser = function() {
				if(!check().form()) {
					return;
				}
				$.ajax({
					type: "GET",
					dataType: "json",
					url: "/user/add",
					data: {
						"userName": $("#userName").val(),
						"passWord": $("#passWord").val()
					},
					success: function(msg) {
						//alert(msg);
						$('#cancelBtn').click();
					}
				});
			}

			$('#saveBtn').on('click', function() {
				addUser();
			});

			$('#cancelBtn').on('click', function() {
				var index = parent.layer.getFrameIndex(window.name);
				parent.getUserPageList();
				parent.layer.close(index);
			});

			//校验字段是否正确 
			function check() {
				/*返回一个validate对象，这个对象有一个form方法，返回的是是否通过验证*/
				return $("#addUserForm").validate({
					rules: {
						userName: {
							required: true
						},
						passWord: {
							required: true
						}
					},
					messages: {
						userName: {
							required: ""
						},
						passWord: {
							required: ""
						}
					}
				});
			}
		</script>
	</body>

</html>